<html>
	</head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link href="vue/css/style.css" rel="stylesheet" media="screen">
	<link href="vue/css/bootstrap.min.css" rel="stylesheet" media="screen">	
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<head>
	<body>
		<header>		
			<div class='body_bar'>
				<div class='wrapper'>
					<div class='logo'>
						<h1>Transport de colis<h1>
					</div>
				</div>				
			</div>	
		</header>
		<section class="content">
			<div class='wrapper'>
				<div class='corp'>
					<div class='cont'>
		<%@ page import="modele.Client" %>
		<%@ page import="java.util.ArrayList" %>

		<% 
			ArrayList<Client> lsClient = (ArrayList) request.getAttribute("resultat");
		%>
		<form method='get' action='/transport-poo/Index'>
			<input type='hidden' name='option' value='expedition'/>
			<input type='hidden' name='getForm' value='true'> 
			<fieldset style="width:30%;">
				<legend>Informations destinataire</legend>
				<table rows='5'>
					<tr>
						<td>Client</td>
						<td>
							<select name="client">
								<% 
									for(Client c : lsClient){
									out.println("<option value='"+c.getNumero()+"'>"+ c.getNom() +"</option>");
									}
								%> 
							</select>
						</td>
					</tr>	
					<tr>
						<td>Nom du destinataire</td>
						<td><input type='text' name='nameDes'/></td>
					</tr>
					<tr>
						<td>Adresse du destinataire</td>
						<td><input type='text' name='adrDes'></td>
					</tr>
				</table>
			</fieldset>
			<fieldset style="width:30%;">
				<legend>Informations colis</legend>
				Nombre de colis : <input id='nb_colis' type='number' step='1' min='0' max='10'>
				<table id="table_colis" style='display:none'>	
				</table>
			</fieldset>
				<table>
					<tr>
						<td><input type='submit' value='Enregistrer'/></td>
						<td></td>
					</tr>
				</table>	
		</form>

		<script>
		$(document).ready(function(){
			$("#nb_colis").change(function(){
				$("#table_colis").show();
				var nb = $("#nb_colis").val();
					$("#table_colis").html("");	
					for (i = 0; i < nb;i++)
					{
						$("#table_colis").append("<tr><td>Poids n°"+ i +"</td><td><input type='text' name='poids"+i+"'</td></tr>");
					}
			});
		});
		</script>
				</div>
				</div>
			</div>
		</section>
	</body>
</html>